<script setup lang="ts">
import useStatusBarHeight from '@/composables/statusBarHeight'
import { useUserInfoStore } from '@/store/userInfo'

const userInfoStore = useUserInfoStore()
const statusBarHeight = useStatusBarHeight()
const topPadding = computed(() => statusBarHeight.value + uni.upx2px(88) + uni.upx2px(88))
const qrcodeTopPadding = computed(() => statusBarHeight.value + uni.upx2px(88) + uni.upx2px(246))

const qrcode = ref('')

onLoad((options) => {
  if (options && options.qrcode)
    qrcode.value = options.qrcode
  else
    qrcode.value = userInfoStore.userInfo?.qr_code || ''
})

onShareAppMessage(() => {
  return {
    title: '我的二维码',
    path: `/pages/profileQRCode?qrcode=${qrcode.value}`,
  }
})

onShareTimeline(() => {
  return {
    title: '我的二维码',
    path: `/pages/profileQRCode?qrcode=${qrcode.value}`,
  }
})
</script>

<template>
  <!-- 渐变背景 -->
  <view class="absolute left-0 top-0 h-screen w-screen from-#4999F7 to-#78D9FE to-opacity-0 bg-gradient-to-b" />
  <view class="absolute left-0 top-0 h-screen w-screen from-white to-white from-opacity-50 to-opacity-0 bg-gradient-to-b" />
  <image class="absolute left-0 top-0 h-392rpx w-333rpx" src="@/static/images/o_bg_tl.png" />
  <image class="absolute right-0 top-589rpx h-484rpx w-197rpx" src="@/static/images/o_bg_br.png" />
  <NavigationBar title="二维码" front-color="#ffffff" />
  <view class="relative h-screen flex flex-col items-center">
    <Spacer :height="topPadding" unit="px" />
    <view class="shadow-16rpx text-80rpx text-#4999F7 font-semibold leading-112rpx shadow-white">
      面对面扫码邀请
    </view>
    <view class="absolute right-0 h-1211rpx w-715rpx" :style="{ top: `${qrcodeTopPadding}px` }">
      <image class="h-1211rpx w-715rpx" src="@/static/images/profile_qrcode_bg.png" />
      <view class="absolute left-141rpx top-95rpx h-400rpx w-400rpx">
        <uv-image width="400rpx" height="400rpx" :src="qrcode">
          <template #loading>
            <uv-loading-icon color="#666666" />
          </template>
        </uv-image>
      </view>
      <view class="absolute left-51rpx top-530rpx h-205rpx w-577rpx flex items-center">
        <!-- <button open-type="share" class="mb-32rpx flex flex-grow-1 flex-col items-center justify-center bg-transparent">
          <image class="h-40rpx w-40rpx" src="@/static/images/share.png" />
          <Spacer height="8" />
          <view class="text-28rpx text-white font-semibold leading-40rpx">
            分享好友
          </view>
        </button> -->
        <view class="absolute bottom-16rpx text-24rpx text-white text-opacity-80 x-center">
          长按可将二维码保存至相册
        </view>
      </view>
    </view>
  </view>
</template>

<route lang="yaml">
name: 'profileQRCode'
style:
  navigationStyle: 'custom'
  disableScroll: true
layout: 'custom'
</route>
